<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/2.0.0/echarts-gl.min.js"></script>
  <script src="./xuzhou_area.js"></script>
</head>
<style>
    #main {
        width: 600px;
        height: 400px;
    }
</style>
<body>
<div id="app">
  <div id="main"></div>
</div>
<script>
	let barData = [
    {
    	name: '淮海烈士纪念塔',
      value: [
	      117.19180099563599,
	      34.232972331687666,
        600
      ]
    },
    {
    	name: '小区' ,
      value: [
	      117.197766998291,
	      34.23378304606286,
        500
      ]
    },
    {
    	name: '淮海科技园1' ,
      value: [
      	117.19447546386719,
        34.22634675427225,
        500
      ]
    },
    {
    	name: '淮海科技园2' ,
      value: [
	      117.19967673110962,
	      34.226531997090315,
        500
      ]
    }
  ]

  /*let coord = {
		'淮海烈士纪念塔': [
			117.19350099563599,
			34.231372331687666
    ],
		'小区': [
			117.194766998291,
			34.23678304606286
    ],
		'淮海科技园1': [
			117.19047546386719,
			34.22434675427225
    ],
		'淮海科技园2': [
			117.19667673110962,
			34.231531997090315
    ]
  }
	let barData1 = [
		{
			name: '淮海烈士纪念塔',
			value: 100
    },
		{
			name: '小区',
			value: 100
		},
		{
			name: '淮海科技园1' ,
			value: 100
		},
		{
			name: '淮海科技园2' ,
			value: 100
		}
	]*/

	const chart = echarts.init(document.getElementById('main'))
	chart.setOption({
    geo3D: {
			show: false,
      map: 'xuzhou',
      boxHeight: 2,
	    regionHeight: 2
    },
		// xAxis3D: {
		// 	show: true
    // },
		// yAxis3D: {
		// 	show: true
    // },
		// zAxis3D: {
		// 	show: true
    // },
    tooltip: {},
		series: [
			{
        name: 'bar3D',
        type: 'bar3D',
        shading: 'color',
				grid3DIndex: 0, // 设置参考系序列号
        coordinateSystem: 'geo3D', // 设置基准点参考系
        data: barData,
        barSize: 10,
        minHeight: 10,
        label: {
        	show: true,
          formatter: v => v.value[v.value.length-1]
        },
        emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
          label: { // label高亮时的配置
            show: true,
            textStyle: {
              color: '#333', // 高亮时标签颜色变为 白色
              fontWeight: 700,
              fontSize: 15, // 高亮时标签字体 变大
            }
          },
          itemStyle: { // itemStyle高亮时的配置
            color: 'rgba(0,100,255,0.8)', // 高亮时地图板块颜色改变
          }
        }
      },
			{
				shading: 'lambert', // 三维地图中三维图形的着色效果
				coordinateSystem: 'geo3D', // 设置基准点参考系
        type: 'map3D',
				grid3DIndex: 0,
        symbolSize: 50,
        name: 'map3D', // 系列名称
        map: 'xuzhou', // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同(ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。)
        // 环境贴图，支持純颜色值，渐变色，全景贴图的 url。默认为 'auto'，在配置有 light.ambientCubemap.texture 的时候会使用该纹理作为环境贴图。否则则不显示环境贴图。
        /*environment: new echarts.graphic.LinearGradient(
          0, 0, 0, 1, [
            { // 配置为垂直渐变的背景
              offset: 0, color: '#e2f3f5' // 天空颜色
            }, {
              offset: 0.7, color: '#22d1ee' // 地面颜色
            }, {
              offset: 1, color: '#0e153a' // 地面颜色
            }
          ], false
        ),*/

        label: { // 标签的相关设置
          show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
          // distance: 50, // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离
          // formatter:, // 标签内容格式器
          textStyle: { // 标签的字体样式
            color: '#000', // 地图初始化区域字体颜色
            fontSize: 14, // 字体大小
            opacity: 1, // 字体透明度
            backgroundColor: 'rgba(0,23,11,0)' // 字体背景色
          },
        },

        itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
          color: 'rgba(150,240,140,0.4)', // 地图板块的颜色
          opacity: 0.5, // 图形的不透明度 [ default: 1 ]
          borderWidth: 0.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
          borderColor: '#404040' // 图形描边的颜色。[ default: #333 ]
        },
        /*emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
          label: { // label高亮时的配置
            show: true,
            textStyle: {
              color: '#21324f', // 高亮时标签颜色变为 白色
              fontSize: 20, // 高亮时标签字体 变大
            }
          },
          itemStyle: { // itemStyle高亮时的配置
            color: '#e1d0b3', // 高亮时地图板块颜色改变
	          opacity: 1
          }
        },*/

        groundPlane: { // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
          show: false, // 是否显示地面。[ default: false ]
          color: '#aaa' // 地面颜色。[ default: '#aaa' ]
        }
      },
			{
				type: 'lines3D',

				coordinateSystem: 'geo3D',
				silent: true,
				effect: {
					show: true,
					trailColor: '#f61717',
					trailWidth: 4,
					trailOpacity: 0.8,
					trailLength: 8,
					// period: 20,
					constantSpeed: 500
				},
				// 是否是多段线, 设置后， 曲线变换为直线
				polyline: true,
        // 混合模式
				// blendMode: 'lighter',
				blendMode: 'source-over',
				lineStyle: {
					width: 4,
					opacity: 1,
          color: 'rgba(0,0,0,0)'
				},
				data: [
					{
						coords: [
							[117.19180099563599,34.232972331687666],
							[117.197766998291,34.23378304606286],
							[117.19967673110962,34.226531997090315],
              [117.19447546386719,34.22634675427225],
							[117.19180099563599,34.232972331687666]
						],
						// 数据值
						value: 10,
						// 数据名
						name: 'foo',
						// 线条样式
						lineStyle: {}
					}
				]
				/*data: [
					[
						[117.19180099563599,34.232972331687666],
						[117.197766998291,34.23378304606286]
					],
					[
						[117.19447546386719,34.22634675427225],
						[117.197766998291,34.23378304606286]
					]
				]*/
			}
    ]
  })
	chart.on('click', function (params) {
		console.log(params);
	});
	console.log(chart)
</script>
</body>
</html>
